<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<canvas id="canvas" style="border: 1px solid blue;"></canvas>
	</body>
	<script>
		var canvas = document.getElementById('canvas')
		var cxt = canvas.getContext('2d')
		canvas.width = 550;
		canvas.height = 400;
		var imagedata = cxt.createImageData(100, 100);
		var data = imagedata.data;
		for(var i = 0; i < data.length; i += 4) {
			data[i + 0] = 0
			data[i + 1] = 200
			data[i + 2] = 255
			data[i + 3] = 255
		}
		cxt.putImageData(imagedata, 20, 20)
	</script>

</html>